<template>
  <div class="gallery">
    <div class="gallery-content">
      <Title title="机关动态" pinyin="JI GUAN DONG TAI" />
      <!--      <Title title="专题专栏" pinyin="ZHUAN TI ZHUAN LAN" />-->
      <el-row :gutter="12">
<!--        <el-col :span="10">-->
<!--          <div class="title">交流工作-->
<!--            <More/>-->
<!--          </div>-->
<!--          <div style="background: #F3F9FF;height: 374px;padding: 0 12px">-->
<!--          </div>-->
<!--        </el-col>-->
<!--        <el-col :span="14">-->
<!--          <div class="title">校园文化图片展出-->
<!--            <More/>-->
<!--          </div>-->
<!--          <div style="background: #F3F9FF;height: 374px;padding: 0 12px">-->
<!--            <el-carousel trigger="click" height="374px" :interval="5000">-->
<!--              <el-carousel-item v-for="(item,index) in imgReduceList" :key="index">-->
<!--                <el-row :gutter="12">-->
<!--                  <el-col :span="12" v-for="(res, i) in item.children" :key="res.attachmentId">-->
<!--                    <div style="height: 181px;background: #102F7A;" :style="i===1 ? 'margin-bottom: 12px' : ''">-->
<!--                      <img :src="res.filePath" class="background-img" alt="" />-->
<!--                    </div>-->
<!--                  </el-col>-->
<!--&lt;!&ndash;                  <el-col :span="12">&ndash;&gt;-->
<!--&lt;!&ndash;                    <div style="height: 181px;background: #102F7A;margin-bottom: 12px">2</div>&ndash;&gt;-->
<!--&lt;!&ndash;                  </el-col>&ndash;&gt;-->
<!--&lt;!&ndash;                  <el-col :span="12">&ndash;&gt;-->
<!--&lt;!&ndash;                    <div style="height: 181px;background: #102F7A">3</div>&ndash;&gt;-->
<!--&lt;!&ndash;                  </el-col>&ndash;&gt;-->
<!--&lt;!&ndash;                  <el-col :span="12">&ndash;&gt;-->
<!--&lt;!&ndash;                    <div style="height: 181px;background: #102F7A">4</div>&ndash;&gt;-->
<!--&lt;!&ndash;                  </el-col>&ndash;&gt;-->
<!--                </el-row>-->
<!--              </el-carousel-item>-->
<!--            </el-carousel>-->
<!--          </div>-->
<!--        </el-col>-->

                <el-col :span="24">
                  <div style="height: 440px;">
                    <div style="position: absolute;right: 0;top: 20px;z-index: 999">
                      <More />
                    </div>
                    <el-tabs v-model="activeName" @tab-click="handleClick">
                      <el-tab-pane label="机关动态" name="1">
                        <div style="background: #F3F9FF;height: 374px;padding: 0 12px">
                          <div style="padding-top: 8px">
                            <div class="list-news" v-for="item in newsList" :key="item.id" @click="handleNews(item)">
                              <div style="display: flex;align-items: center;">
                                <div class="list-mark"></div>
                                <div class="list-title">{{ item.name }}</div>
                              </div>
                              <div style="width: 140px">
                                {{ item.createDate }}
                              </div>
                            </div>
                          </div>
                        </div>
                      </el-tab-pane>
                      <el-tab-pane label="培养工作" name="2">
                      </el-tab-pane>
                      <el-tab-pane label="学科建设" name="3">
                      </el-tab-pane>
                      <el-tab-pane label="交流工作" name="4">
                      </el-tab-pane>
                      <el-tab-pane label="动态模块2" name="5">
                      </el-tab-pane>
                      <el-tab-pane label="动态模块3" name="6">
                      </el-tab-pane>
                      <el-tab-pane label="动态模块4" name="7">
                      </el-tab-pane>
                      <el-tab-pane label="动态模块5" name="8">
                      </el-tab-pane>
                    </el-tabs>
                  </div>
                </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
// import './layout.css'

import Title from "@/components/Title.vue";
import MarqueeText from "vue-marquee-text-component";
import vueSeamlessScroll from 'vue-seamless-scroll'
import More from "@/components/More.vue";

export default {
  props: ['imgCollList'],
  components: {More, MarqueeText, Title, vueSeamlessScroll},
  data() {
    return {
      paused: false,
      listData: [1, 2, 3, 4, 5, 6],
      imgList: [],
      imgReduceList: [],
      classOption: {
        limitMoveNum: 1,
        direction: 2,
        step: 0.3,
      },
      newsList: [
        {
          id: 1,
          name: '2024，开训！迎“寒“而上动真格，练兵备战正当时',
          createDate: '2024-1-11 13:22:33'
        },
        {
          id: 2,
          name: '来！辞旧迎新看这场踔厉奋发的迎新年晚会',
          createDate: '2024-1-11 13:22:33'
        },
        {
          id: 2,
          name: '大学召开政治理论教学研讨推进会',
          createDate: '2024-1-11 13:22:33'
        },
        {
          id: 2,
          name: '真飒！“孔雀蓝”以青春星火点亮强军征程',
          createDate: '2024-1-11 13:22:33'
        },
        {
          id: 2,
          name: '翰墨光影赞盛世 同心筑梦映军魂 | 邀你一起欣赏这场主题书画摄影展',
          createDate: '2024-1-11 13:22:33'
        },
        {
          id: 2,
          name: '图书馆邀您参加：万方杯“知识伴我行”电子资源检索大赛',
          createDate: '2024-1-11 13:22:33'
        },
        {
          id: 2,
          name: '空军工程大学关于遴选2021年博士研究生文职人员预选对象的公告',
          createDate: '2024-1-11 13:22:33'
        },
        {
          id: 2,
          name: '真飒！“孔雀蓝”以青春星火点亮强军征程',
          createDate: '2024-1-11 13:22:33'
        },
        {
          id: 2,
          name: '翰墨光影赞盛世 同心筑梦映军魂 | 邀你一起欣赏这场主题书画摄影展',
          createDate: '2024-1-11 13:22:33'
        },
      ]
    }
  },
  watch: {
    imgCollList(data) {
      // this.imgList = data
      this.getImg(data)
    }
  },
  methods: {
    handleOff() {

    },
    mouseEnter() {
      this.paused = true
    },
    mouseLeave() {
      this.paused = false
    },
    handleOut() {

    },

    getImg(data) {
      let arr = []
      // 提出图片
      data.forEach(item => {
        if (item.attachmentList.length > 0) {
          arr = item.attachmentList
        }
        this.imgList = this.imgList.concat(arr)
      })
      //取4的倍数，整数
      const num = Math.floor(this.imgList.length / 4)
      // 4个一组，分类
      const classList = this.imgList.reduce((acc, curr, index) => {
        if (index % 4 === 0) acc.push([])
        acc[Math.floor(index / 4)].push(curr)
        return acc
      }, [])
      this.imgReduceList = classList.map((x) => {
        return {
          "children": [...x]
        }
      });
      // 截取整数
      this.imgReduceList = this.imgReduceList.slice(0,num)
    }
  }
}
</script>

<style lang="less" scoped>
.gallery {
  width: 100%;
  margin-top: 24px;
  display: flex;
  justify-content: center;
}

.gallery-content {
  width: 1200px;
  //height: 440px;
  display: flex;
  flex-direction: column;
}

/deep/ .el-carousel__indicators {
  display: none;
}

.title {
  height: 32px;
  //font-size: 18px;
  line-height: 32px;
  border-left: 8px solid #102F7A;
  padding-left: 12px;
  //margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
}

.background-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/deep/ .el-tabs__nav-scroll {
  width: 1100px;
}
/deep/ .el-tabs__nav-wrap {
  width: 1150px;
}

/deep/ .el-tabs__nav-prev {
  line-height: 54px;
}

/deep/ .el-tabs__nav-next {
  line-height: 54px;
}

/deep/ .el-tabs__item {
  height: 54px;
  font-size: 18px;
  font-weight: 400;
  padding: 0 30px;
  line-height: 54px;
  //top: 2px;
}

/deep/ .el-tabs__item:hover {
  color: #102F7A;
}

/deep/ .el-tabs__item.is-active {
  background: #102F7A;
  color: #fff;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

/deep/ .el-tabs__active-bar {
  height: 0;
}

/deep/ .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
  padding-left: 30px;
  line-height: 54px;
  top: 0;
}

/deep/ .el-tabs--top .el-tabs__item.is-top:last-child {
  padding-right: 30px;
}

/deep/ .el-timeline {
  padding: 0;
  font-size: 16px;
}

/deep/ .el-timeline-item__node {
  background-color: #102F7A;
}

/deep/ .el-timeline-item:last-child {
  padding-bottom: 0;
}

/deep/ .el-timeline-item__tail {
  border-left: 1px solid #102F7A;
  top: 17px;
  //bottom: 1px;
  height: 25px;
}

/deep/ .el-timeline-item__node--normal {
  width: 8px;
  height: 8px;
  left: 1px;
  top: 5px;
}

/deep/ .el-tabs__header {
  margin: 0 0 12px;
}

/deep/ .is-bottom {
  margin: 0;
}

/deep/ .el-tabs__nav-wrap::after {
  height: 1px;
}

/deep/ .el-timeline-item__wrapper {
  padding-left: 12px;
}

.list-news {
  font-size: 15px;
  color: #444;
  line-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  //border-bottom: #102F7A 1px dashed;
}

.list-mark {
  width: 5px;
  height: 5px;
  background: #102F7A;
  margin-right: 10px;
}

.list-title {
  cursor: pointer;
}
</style>
